<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('布置实验')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    h4 {
        overflow: hidden;
        /* 强制文字不换行 */
        white-space: nowrap;
        /* 超出部分显示省略号 */
        text-overflow: ellipsis;
    }
    .img{
        position: relative;
        overflow: hidden;
    }
    .over{
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        transform: rotate(-45deg);
        color: red;
        border: 1px solid red;
        top: 50px;
        right: 50px;
        line-height: 60px;
        text-align: center;
    }
</style>
<body class="white-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
            <div class="select-list">
                <ul>
                    <li>
                        <button class="btn btn-warning btn-navbar" onclick="toLookExperiment(1)">待学习</button><div style="width: 200px;height: 20px"></div>
                    </li>
                    <li>
                        <button class="btn btn-primary btn-navbar" onclick="toLookExperiment(2)">待批改</button><div style="width: 200px;height: 20px"></div>
                    </li>
                    <li>
                        <button class="btn btn-success btn-navbar" onclick="toLookExperiment(3)">已批改</button><div style="width: 200px;height: 20px"></div>
                    </li>
                </ul>
            </div>
    </div>
    <div class="col-sm-12 select-table table-striped" >
        <div style="text-align: center;" id="titleContent" hidden="hidden"><h3>无内容，您可在开放式虚拟实验栏目下预约虚拟仿真实验。</h3></div>
        <div id="card"></div>
    </div>



    <!--<div class="col-md-4" style="padding-top: 20px;">

    </div>-->
</div>
<!--<div class="container">
    <br>
    <br>
    &lt;!&ndash;<input type="text" name="studentId" id="studentId" th:value="${studentId}" hidden="hidden"/>&ndash;&gt;
    <input type="text" name="status" id="status" hidden="hidden"/>
    <div class="form-group row" >
        <div class="col-lg-1">
            <button class="form-control btn btn-warning" onclick="toLookExperiment(1)">待学习</button>
        </div>
        <div class="col-lg-1">
            <button class="form-control btn btn-primary" onclick="toLookExperiment(2)">待批改</button>
        </div>
        <div class="col-lg-1">
            <button class="form-control btn btn-success" onclick="toLookExperiment(3)">已批改</button>
        </div>
    </div>
    <div class="row" id="card1">
        &lt;!&ndash;<div class="col-md-3" style="padding-top: 20px;">
            <div class="card">
                <img src="#" style="width: 100%;"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h4 class="card-title" ></h4>
                    <p class="card-text"><span class="glyphicon glyphicon-play-circle"></span><span></span></p>
                    <div style="float: right;"><a href="#" class="btn btn-success">开始试验</a></div>
                </div>
            </div>
        </div>&ndash;&gt;
    </div>
    <div class="row" style="text-align: center">

    </div>
</div>-->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: datetimepicker-js"/>
</body>
<script>
    /**
     * 查找学生待学习的实验
     * @param value
     */
      function toLookExperiment(value) {
          $("#status").attr("value",value);
          $("#card").html('');
          var date=new Date();
          if(value==1) {
              //value值代表的内容是 查询状态
              $.ajax({
                  url: ctx + '/system/OnlineExperimentStu/toLookExperiment',
                  type: 'get',
                  data: {status: value},
                  dataType: 'json',
                  success: function (data) {
                      if(data.list.length>0){
                          $("#titleContent").attr("hidden",true);
                      }else{
                          $("#titleContent").attr("hidden",false);
                      }
                      for (var i = 0; i < data.list.length; i++) {
                          if(new Date(data.list[i].experimentTeaEndTime)<date){
                              var value1 = "<div class=\"col-md-3\" style=\"padding-top: 20px;\" >\n" +
                                  "            <div class=\"card\">\n" +
                                  "                <img src='" + ctx + data.list[i].onlineExperimentImg + "' class='img' style=\"width: 100%;height: 202px\"\n" +
                                  "                     class=\"card-img-top\" alt=\"\">\n" +
                                  "<div class='over'>" +
                                  "                              已过期" +
                                  "                              </div>" +
                                  "                <div class=\"card-body\">\n" +
                                  "                    <h4 class=\"card-title\" >" + data.list[i].onlineExperimentName + "</h4>\n" +
                                  "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>" + data.list[i].experimentTeaBeginTime + "--" + data.list[i].experimentTeaEndTime + "</span></p>\n" +
                                  "                    <div style=\"float: right;\"><button type='button' class=\"btn btn-success\" value='"+data.list[i].experimentTeaId+","+data.list[i].experimentTeaEndTime+","+data.list[i].experimentTeaBeginTime+"' onclick='beginExperiment(value)'>开始试验</button></div>\n" +
                                  "                </div>\n" +
                                  "            </div>\n" +
                                  "        </div>";
                              $("#card").append(value1)
                          }else{
                              var value1 = "<div class=\"col-md-3\" style=\"padding-top: 20px;\" >\n" +
                                  "            <div class=\"card\">\n" +
                                  "                <img src='" + ctx + data.list[i].onlineExperimentImg + "' class='img' style=\"width: 100%;height: 202px\"\n" +
                                  "                     class=\"card-img-top\" alt=\"\">\n" +
                                  "                <div class=\"card-body\">\n" +
                                  "                    <h4 class=\"card-title\" >" + data.list[i].onlineExperimentName + "</h4>\n" +
                                  "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>" + data.list[i].experimentTeaBeginTime + "--" + data.list[i].experimentTeaEndTime + "</span></p>\n" +
                                  "                    <div style=\"float: right;\"><button type='button' class=\"btn btn-success\" value='"+data.list[i].experimentTeaId+","+data.list[i].experimentTeaEndTime+","+data.list[i].experimentTeaBeginTime+"' onclick='beginExperiment(value)'>开始试验</button></div>\n" +
                                  "                </div>\n" +
                                  "            </div>\n" +
                                  "        </div>";
                              $("#card").append(value1)
                          }

                      }
                  }
              })
          }else if(value==2){
              //value值代表的内容是 查询状态
              $.ajax({
                  url : ctx + '/system/OnlineExperimentStu/toLookExperiment',
                  type : 'get',
                  data : {status:value},
                  dataType : 'json',
                  success : function (data) {
                      if(data.list.length>0){
                          $("#titleContent").attr("hidden",true);
                      }else{
                          $("#titleContent").attr("hidden",false);
                      }
                      for(var i=0;i<data.list.length;i++){
                          var value1="<div class=\"col-md-3\" style=\"padding-top: 20px;\">\n" +
                              "            <div class=\"card\">\n" +
                              "                <img src='"+ctx+data.list[i].onlineExperimentImg+"' style=\"width: 100%;height: 202px\"\n" +
                              "                     class=\"card-img-top\" alt=\"...\">\n" +
                              "                <div class=\"card-body\">\n" +
                              "                    <h4 class=\"card-title\" >"+data.list[i].onlineExperimentName+"</h4>\n" +
                              "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>"+data.list[i].experimentTeaBeginTime+"--"+data.list[i].experimentTeaEndTime+"</span></p>\n" +
                              /*"                    <div style=\"float: right;\"><a href='"+ctx+"/system/OnlineExperimentStu/makeExperiment1?experimentTeaId="+data.list[i].experimentTeaId+"' class=\"btn btn-success\">修改重做</a></div>\n" +*/
                              "                    <div style=\"float: right;\"><button type='button' class=\"btn btn-success\" value='"+data.list[i].experimentTeaId+","+data.list[i].experimentTeaEndTime+","+data.list[i].experimentTeaBeginTime+"' onclick='editExperiment(value)'>修改重做</button></div>\n" +
                              "                </div>\n" +
                              "            </div>\n" +
                              "        </div>";
                          $("#card").append(value1)
                      }
                  }
              })
          }else{
              //value值代表的内容是 查询状态
              $.ajax({
                  url : ctx + '/system/OnlineExperimentStu/toLookExperiment',
                  type : 'get',
                  data : {status:value},
                  dataType : 'json',
                  success : function (data) {
                      if(data.list.length>0){
                          $("#titleContent").attr("hidden",true);
                      }else{
                          $("#titleContent").attr("hidden",false);
                      }
                      for(var i=0;i<data.list.length;i++){
                          var value1="<div class=\"col-md-3\" style=\"padding-top: 20px;\">\n" +
                              "            <div class=\"card\">\n" +
                              "                <img src='"+ctx+data.list[i].onlineExperimentImg+"' style=\"width: 100%;height: 202px\"\n" +
                              "                     class=\"card-img-top\" alt=\"...\">\n" +
                              "                <div class=\"card-body\">\n" +
                              "                    <h4 class=\"card-title\" >"+data.list[i].onlineExperimentName+"</h4>\n" +
                              "                    <p class=\"card-text\"><span class=\"glyphicon glyphicon-play-circle\"></span><span>"+data.list[i].experimentTeaBeginTime+"--"+data.list[i].experimentTeaEndTime+"</span></p>\n" +
                              "                    <div style=\"float: right;\"><a href='"+ctx+"/system/OnlineExperimentStu/lookExperiment?experimentTeaId="+data.list[i].experimentTeaId+"' class=\"btn btn-success\">查看成绩</a></div>\n" +
                              "                </div>\n" +
                              "            </div>\n" +
                              "        </div>";
                          $("#card").append(value1)
                      }
                  }
              })
          }
      }

      $(function () {
          toLookExperiment(1)
      })

      /*开始试验，跳转到开始试验页面，先判断是否在实验时间内*/
      function beginExperiment(value) {
           var array=new Array();
           array=value.split(",");
           var endTime=new Date(array[1]);
           var beginTime=new Date(array[2]);
           var nowDate=new Date();
           if(beginTime.getTime()<=nowDate.getTime() && nowDate.getTime()<=endTime.getTime()){
               window.location.href=ctx+"/system/OnlineExperimentStu/makeExperiment?experimentTeaId="+array[0];
           }else if(nowDate.getTime()<beginTime.getTime()){
               alert("时间还没开始，请按时做实验")
           }else{
               alert("已过时间，不能做实验了")
           }
      }

      /*修改重做试验，跳转到重做试验页面，判断是否在时间范围重做实验*/
    function editExperiment(value) {
        var array=new Array();
        array=value.split(",");
        var endTime=new Date(array[1]);
        var beginTime=new Date(array[2]);
        var nowDate=new Date();
        if(beginTime.getTime()<=nowDate.getTime() && nowDate.getTime()<=endTime.getTime()){
            window.location.href=ctx+"/system/OnlineExperimentStu/makeExperiment1?experimentTeaId="+array[0];
        }else{
            alert("已过时间，不能再修改实验了")
        }
    }
</script>
</html>
